<template>
 <div class="subpage-main">

    <div v-if="data.isMobile==false" style="height: 25px;"></div>
    <userInfoSection v-if="data.isMobile==false" :user-info="data.loginedUserInfo"></userInfoSection>
   <div v-if="data.isMobile==false" style="width: 100%;margin-top: 20px;">
      <div v-if="!pageStyle2" style="width: 100%;border-radius: 5px;background-position: center;background-repeat: no-repeat;background-size: cover;background-image: url(https://api.dujin.org/bing/1920.php);position: relative;">
         <div style="width: 100%;height: 100%;padding: 20px 20px;background-color: rgba(255,255,255,0.8);margin-top: 20px;">
            <div style="font-size: 24px;padding: 10px 0;padding-bottom: 5px;">
            欢迎来到志愿助手平台！
         </div>
         <div style="line-height: 40px;">
            志愿助手平台旨在为考生提供全方位的辅助服务。无论您是想了解院校信息、查询专业详情，还是希望获得智能化的志愿填报建议，我们都能满足您的需求。
         </div>
         </div>
      </div>
      <div v-if="!pageStyle2" style="margin-top: 20px;width: 100%;color: black;line-height: 40px;">
         <div style="margin-right: 20px;width: calc((100% - 40px) / 3);display: inline-block;border-radius:5px;padding: 40px 40px;background-color: rgb(242,242,242);height: 120px;font-size: 18px;position: relative;margin-bottom: 20px;" @click="changePage(2)">
               <svg width="40" height="40" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M25.294 2.402l20.683 9.892a3 3 0 01.524 5.092l-.002 6.176a3 3 0 11-3.5 0V19.13l-17.705 8.469a3 3 0 01-2.588 0L2.023 17.706a3 3 0 010-5.412l20.683-9.892a3 3 0 012.588 0zM11.838 27.184l-.144-.06a2 2 0 00-1.532 3.692l13 6 .175.071a2 2 0 001.46-.053l13-5.654.142-.068a2 2 0 00-1.737-3.6l-12.178 5.297-12.186-5.625zm0 8a2 2 0 10-1.676 3.632l13 6a2 2 0 001.636.018l13-5.654a2 2 0 10-1.596-3.668l-12.178 5.297-12.186-5.625zM5.635 15L24 6.217 42.364 15 24 23.783 5.635 15z" fill="currentColor"/></svg><span style="margin-left: 40px;position: absolute;top: 40px;line-height: 40px;">院校查询</span>
         </div>
         <div style="margin-right: 20px;width: calc((100% - 40px) / 3);display: inline-block;border-radius:5px;padding: 40px 40px;background-color: rgb(242,242,242);height: 120px;font-size: 18px;position: relative;margin-bottom: 20px;" @click="changePage(3)">
            <svg width="40" height="40" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.106 27.17a1 1 0 011.341-.446l2 1a1 1 0 01.553.894v6.187l11 5.923 11-5.923v-6.187a1 1 0 01.553-.894l2-1a1 1 0 011.447.894V36a2 2 0 01-1.052 1.76l-13 7a2 2 0 01-1.896 0l-13-7A2 2 0 019 36v-8.382a1 1 0 01.106-.447zM25.415 4.26l.226.093 18 8.095c1.534.69 2.324 2.113 2.358 3.554L46 16v19a1 1 0 01-1 1h-2a1 1 0 01-1-1V20.557l-16.226 8.028a4 4 0 01-3.336.098l-.212-.098-18-8.905c-2.966-1.467-2.951-5.666-.055-7.142l.188-.09 18-8.096a4 4 0 013.056-.093zM24 8L6 16.095 24 25l18-8.905L24 8z" fill="currentColor"/></svg><span style="margin-left: 40px;position: absolute;top: 40px;line-height: 40px;">专业查询</span>
         </div>
         <div style="margin-right: 0px;width: calc((100% - 40px) / 3);display: inline-block;border-radius:5px;padding: 40px 40px;background-color: rgb(242,242,242);height: 120px;font-size: 18px;position: relative;margin-bottom: 20px;" @click="changePage(4)">
            <svg width="40" height="40" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.342 8c.647 0 1.261.312 1.676.85L21.44 12h22.464c1.157 0 2.095.895 2.095 2v28c0 1.105-.938 2-2.095 2H4.095C2.938 44 2 43.105 2 42V10.364C2 9.058 2.977 8 4.182 8h13.16zM42 16H6v24h36V16zm-17.726 5.077c.083.05.152.123.2.21l1.941 3.524a.55.55 0 00.36.274l3.792.85a.575.575 0 01.42.681.584.584 0 01-.127.265l-2.593 3.027a.593.593 0 00-.137.444l.399 4.014a.568.568 0 01-.488.63.525.525 0 01-.294-.053l-3.51-1.773a.524.524 0 00-.474 0l-3.51 1.773a.536.536 0 01-.73-.268.598.598 0 01-.052-.309l.399-4.014a.593.593 0 00-.137-.444l-2.593-3.027a.595.595 0 01.041-.811.539.539 0 01.252-.135l3.792-.85a.55.55 0 00.36-.274l1.941-3.524a.533.533 0 01.748-.21z" fill="currentColor"/></svg><span style="margin-left: 40px;position: absolute;top: 40px;line-height: 40px;">收藏夹</span>
         </div>
         <div style="margin-right: 20px;width: calc((100% - 40px) / 3);display: inline-block;border-radius:5px;padding: 40px 40px;background-color: rgb(242,242,242);height: 120px;font-size: 18px;position: relative;margin-bottom: 20px;" @click="changePage(5)">
            <svg width="40" height="40" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 4a2 2 0 012-2h25l9 9.429V44a2 2 0 01-2 2H8a2 2 0 01-2-2V4zm24 2v8.039h8V42H10V6h20zM14 28a1 1 0 011-1h10a1 1 0 011 1v2a1 1 0 01-1 1H15a1 1 0 01-1-1v-2zm1-9a1 1 0 00-1 1v2a1 1 0 001 1h18a1 1 0 001-1v-2a1 1 0 00-1-1H15z" fill="currentColor"/></svg><span style="margin-left: 40px;position: absolute;top: 40px;line-height: 40px;">志愿智能填报</span>
         </div>
         <div style="margin-right: 20px;width: calc((100% - 40px) / 3);display: inline-block;border-radius:5px;padding: 40px 40px;background-color: rgb(242,242,242);height: 120px;font-size: 18px;position: relative;margin-bottom: 20px;" @click="changePage(6)">
            <svg width="40" height="40" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M34.03 23c3.82 0 6.914 3.068 6.914 6.853a6.8 6.8 0 01-1.993 4.815C42.38 35.675 45 38.876 45 42.67v.515c0 .45-.365.815-.815.815h-1.677a.815.815 0 01-.812-.74l-.021-.196c-.42-3.111-2.79-5.495-5.374-5.495h-4.62c-2.6 0-4.97 2.416-5.364 5.558l-.015.134a.815.815 0 01-.811.739h-1.676a.815.815 0 01-.815-.815v-.515c0-3.808 2.649-7.02 6.1-8.014a6.8 6.8 0 01-1.983-4.803c0-3.785 3.096-6.853 6.914-6.853zM22 4c9.717 0 17.636 7.7 17.988 17.331a9.932 9.932 0 00-4.125-1.294C34.909 13.235 29.066 8 22 8 14.268 8 8 14.268 8 22v14h12.934l-1.377 4H6a2 2 0 01-2-2V22c0-9.941 8.059-18 18-18zm12.03 22.853a3 3 0 100 6 3 3 0 000-6zM20 25a1 1 0 011 1v2a1 1 0 01-1 1h-5a1 1 0 01-1-1v-2a1 1 0 011-1h5zm8-8a1 1 0 011 1v2a1 1 0 01-1 1H15a1 1 0 01-1-1v-2a1 1 0 011-1h13z" fill="currentColor"/></svg><span style="margin-left: 40px;position: absolute;top: 40px;line-height: 40px;">专业咨询</span>
         </div>
         <div style="margin-right: 0px;width: calc((100% - 40px) / 3);display: inline-block;border-radius:5px;padding: 40px 40px;background-color: rgb(242,242,242);height: 120px;font-size: 18px;position: relative;margin-bottom: 20px;" @click="changePage(8)">
            <svg width="40" height="40" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 3c5.523 0 10 4.477 10 10s-4.477 10-10 10-10-4.477-10-10S18.477 3 24 3zm18 35c0-7.714-6.477-12-12-12H18c-5.523 0-12 4.292-12 12v6a2 2 0 002 2h32a2 2 0 002-2v-6zm-12-8c3.742 0 8 2.956 8 8v4H10v-4c0-5.188 4.34-8 8-8h12zM18 13a6 6 0 1112 0 6 6 0 01-12 0z" fill="currentColor"/></svg><span style="margin-left: 40px;position: absolute;top: 40px;line-height: 40px;">{{ data.loginedUserInfo==undefined?'登录':'用户中心' }}</span>
         </div>
      </div>
      <a-carousel
    :autoPlay="true"
    animation-name="card"
    indicator-position="bottom"
    :style="{
      width: '100%',
      height: '500px',
    }"
    style="margin-bottom: 20px;"
  >
    <a-carousel-item v-for="image in ['https://10wallpaper.com/wallpaper/1920x1080/1506/Alpine_snow_and_ice_melting-2015_Bing_theme_wallpaper_1920x1080.jpg',
   'https://img2.baidu.com/it/u=1864118011,1614065488&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
   'https://img0.baidu.com/it/u=4040733431,3892581501&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
   ]" :style="{ width: '80%',
            backgroundImage:'url(' + image + ')'
   }" style="border-radius: 5px;padding-left: 20px;padding-top: 250px;background-position: center;background-size: cover;">
               <div style="transform: translate(0,-50%);text-align: left;color: white;width: 60%;">
                  <p style="font-size: 40px;font-family: 微软雅黑 light;">欢迎来到志愿助手平台</p>
                  <p style="font-size: 16px;line-height: 30px;margin-top: 10px;">志愿助手平台旨在为考生提供全方位的辅助服务。无论您是想了解院校信息、查询专业详情，还是希望获得智能化的志愿填报建议，我们都能满足您的需求。</p>
               </div>
    </a-carousel-item>
  </a-carousel>
  <div style="width: 100%;margin-bottom: 20px;">
   <div style="display: inline-block;width: 33.3%;display: inline-block;height: 300px;position: relative">
      <div class="card-wrapper" @click="changePage(2)">
         <p style="font-size: 20px;font-weight: bold;margin-bottom: 20px;">院校查询</p>
         <p style="font-size: 14px;">考生可以通过学校的名称、所在省、办学层次、类型层次等条件进行查询。通过这些查询条件，考生可以快速找到符合自己需求的学校，并可以将其添加到个人收藏夹中。此外，本软件还提供了学校对比功能，考生可以将不同的学校进行对比，以便更好地了解各个学校之间的差异和优劣，从而做出更加明智的志愿填报决策。</p>
      </div>
   </div>
   <div style="display: inline-block;width: 33.3%;display: inline-block;height: 300px;position: relative">
      <div class="card-wrapper" @click="changePage(3)">
         <p style="font-size: 20px;font-weight: bold;margin-bottom: 20px;">专业查询</p>
         <p style="font-size: 14px;">考生可以通过专业的名称、层次等条件进行查询。通过这些查询条件，考生可以快速找到感兴趣的专业，并可以将其添加到个人收藏夹中。本软件旨在帮助考生全面了解不同专业的详情，包括专业介绍、就业前景、学科方向等。</p>
      </div>
   </div>
   <div style="display: inline-block;width: 33.3%;display: inline-block;height: 300px;position: relative">
      <div class="card-wrapper" @click="changePage(4)">
         <p style="font-size: 20px;font-weight: bold;margin-bottom: 20px;">收藏夹</p>
         <p style="font-size: 14px;">考生可以将感兴趣的院校和专业添加到个人的收藏夹中。通过收藏夹功能，考生可以随时查看自己所收藏的院校和专业，方便追踪和管理自己的志愿填报备选项。考生可以随时浏览收藏夹中的内容，了解每个项目的详细信息，包括院校的历史概况、专业的学科设置、就业前景等。</p>
      </div>
   </div>
   <div style="display: inline-block;width: 33.3%;display: inline-block;height: 300px;position: relative">
      <div class="card-wrapper" @click="changePage(5)">
         <p style="font-size: 20px;font-weight: bold;margin-bottom: 20px;">志愿智能填报</p>
         <p style="font-size: 14px;">考生可以根据输入和选择的志愿信息自主选择志愿，并将其收藏到志愿表中。同时，考生还可以导出志愿表以备份和查看。此外，通过一键智能填报功能，系统能够智能生成符合考生需求的理想志愿表。</p>
      </div>
   </div>
   <div style="display: inline-block;width: 33.3%;display: inline-block;height: 300px;position: relative">
      <div class="card-wrapper" @click="changePage(6)">
         <p style="font-size: 20px;font-weight: bold;margin-bottom: 20px;">专业咨询</p>
         <p style="font-size: 14px;">考生可以与系统自动分配的咨询师进行交流。通过与专业的咨询师的沟通，考生可以得到个性化的志愿填报建议和指导。</p>
      </div>
   </div>
   <div style="display: inline-block;width: 33.3%;display: inline-block;height: 300px;position: relative">
      <div class="card-wrapper" @click="changePage(11)">
         <p style="font-size: 20px;font-weight: bold;margin-bottom: 20px;">问答区</p>
         <p style="font-size: 14px;">考生可以在此发表问题，并且可以查看和评论其他考生所发表的问题。同时，考生也可以方便地查看自己曾经发表过的问题。</p>
      </div>
   </div>
  </div>
      <div v-if="pageStyle2" style="width: 100%;border-radius: 5px;background-position: center;background-repeat: no-repeat;background-size: cover;background-image: url(https://api.dujin.org/bing/1920.php);margin-top: 0px;margin-bottom: 20px;overflow: hidden;display: none;">
         <div style="width: 100%;background-color: rgba(255,255,255,0.6);">
            <div style="padding-left: 50%;padding-top: 200px;height: 400px;width: 100%;">
               <div style="transform: translate(-50%,-50%);text-align: center;color: black;">
                  <p style="font-size: 40px;">欢迎来到志愿助手平台！</p>
                  <p style="font-size: 16px;line-height: 30px;margin-top: 10px;">志愿助手平台旨在为考生提供全方位的辅助服务。无论您是想了解院校信息、查询专业详情，还是希望获得智能化的志愿填报建议，我们都能满足您的需求。</p>
               </div>
            </div>
         <div style="text-align: center;margin-top: -70px;padding-bottom: 80px;">
            <span>
               <div class="quick-button" @click="changePage(2)">
                  <svg width="40" height="40" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.106 27.17a1 1 0 011.341-.446l2 1a1 1 0 01.553.894v6.187l11 5.923 11-5.923v-6.187a1 1 0 01.553-.894l2-1a1 1 0 011.447.894V36a2 2 0 01-1.052 1.76l-13 7a2 2 0 01-1.896 0l-13-7A2 2 0 019 36v-8.382a1 1 0 01.106-.447zM25.415 4.26l.226.093 18 8.095c1.534.69 2.324 2.113 2.358 3.554L46 16v19a1 1 0 01-1 1h-2a1 1 0 01-1-1V20.557l-16.226 8.028a4 4 0 01-3.336.098l-.212-.098-18-8.905c-2.966-1.467-2.951-5.666-.055-7.142l.188-.09 18-8.096a4 4 0 013.056-.093zM24 8L6 16.095 24 25l18-8.905L24 8z" fill="currentColor"/></svg><br><p>院校查询</p>
               </div>
            </span>
            <span>
               <div class="quick-button" @click="changePage(3)">
                  <svg width="40" height="40" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.958 3.522l19.433 10.6a1 1 0 010 1.756l-19.433 10.6a2 2 0 01-1.916 0L3.61 15.878a1 1 0 010-1.756l19.433-10.6a2 2 0 011.916 0zM5.93 22.23l-.14-.067a2 2 0 00-1.723 3.607l18.991 9.995.146.07.143.056.138.042.145.033.11.017.187.016.108.001.128-.006.172-.022.135-.028.078-.02.175-.06.103-.043c.039-.017.077-.036.115-.056l18.99-9.995a2 2 0 00-1.864-3.54L24 31.74 5.93 22.23zm0 9l-.14-.067a2 2 0 00-1.723 3.607l19 10 .142.067c.42.182.873.207 1.29.1.465.12.974.074 1.431-.167l19-10a2 2 0 00-1.862-3.54l-18.57 9.772L5.932 31.23zM10.353 15L24 7.556 37.647 15 24 22.444 10.353 15z" fill="currentColor"/></svg><br><p>专业查询</p>
               </div>
            </span>
            <span>
               <div class="quick-button" @click="changePage(4)">
                  <svg width="40" height="40" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.342 8c.647 0 1.261.312 1.676.85L21.44 12h22.464c1.157 0 2.095.895 2.095 2v28c0 1.105-.938 2-2.095 2H4.095C2.938 44 2 43.105 2 42V10.364C2 9.058 2.977 8 4.182 8h13.16zM42 16H6v24h36V16zm-17.726 5.077c.083.05.152.123.2.21l1.941 3.524a.55.55 0 00.36.274l3.792.85a.575.575 0 01.42.681.584.584 0 01-.127.265l-2.593 3.027a.593.593 0 00-.137.444l.399 4.014a.568.568 0 01-.488.63.525.525 0 01-.294-.053l-3.51-1.773a.524.524 0 00-.474 0l-3.51 1.773a.536.536 0 01-.73-.268.598.598 0 01-.052-.309l.399-4.014a.593.593 0 00-.137-.444l-2.593-3.027a.595.595 0 01.041-.811.539.539 0 01.252-.135l3.792-.85a.55.55 0 00.36-.274l1.941-3.524a.533.533 0 01.748-.21z" fill="currentColor"/></svg><br><p>收藏夹</p>
               </div>
            </span>
            <span>
               <div class="quick-button" @click="changePage(5)">
                  <svg width="40" height="40" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 4a2 2 0 012-2h25l9 9.429V44a2 2 0 01-2 2H8a2 2 0 01-2-2V4zm24 2v8.039h8V42H10V6h20zM14 28a1 1 0 011-1h10a1 1 0 011 1v2a1 1 0 01-1 1H15a1 1 0 01-1-1v-2zm1-9a1 1 0 00-1 1v2a1 1 0 001 1h18a1 1 0 001-1v-2a1 1 0 00-1-1H15z" fill="currentColor"/></svg><br><p>志愿智能填报</p>
               </div>
            </span>
            <span>
               <div class="quick-button" @click="changePage(6)">
                  <svg width="40" height="40" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M34.03 23c3.82 0 6.914 3.068 6.914 6.853a6.8 6.8 0 01-1.993 4.815C42.38 35.675 45 38.876 45 42.67v.515c0 .45-.365.815-.815.815h-1.677a.815.815 0 01-.812-.74l-.021-.196c-.42-3.111-2.79-5.495-5.374-5.495h-4.62c-2.6 0-4.97 2.416-5.364 5.558l-.015.134a.815.815 0 01-.811.739h-1.676a.815.815 0 01-.815-.815v-.515c0-3.808 2.649-7.02 6.1-8.014a6.8 6.8 0 01-1.983-4.803c0-3.785 3.096-6.853 6.914-6.853zM22 4c9.717 0 17.636 7.7 17.988 17.331a9.932 9.932 0 00-4.125-1.294C34.909 13.235 29.066 8 22 8 14.268 8 8 14.268 8 22v14h12.934l-1.377 4H6a2 2 0 01-2-2V22c0-9.941 8.059-18 18-18zm12.03 22.853a3 3 0 100 6 3 3 0 000-6zM20 25a1 1 0 011 1v2a1 1 0 01-1 1h-5a1 1 0 01-1-1v-2a1 1 0 011-1h5zm8-8a1 1 0 011 1v2a1 1 0 01-1 1H15a1 1 0 01-1-1v-2a1 1 0 011-1h13z" fill="currentColor"/></svg><br><p>咨询师</p>
               </div>
            </span>
            <span>
               <div class="quick-button" @click="changePage(11)">
                  <svg width="40" height="40" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 2c12.15 0 22 9.85 22 22s-9.85 22-22 22S2 36.15 2 24 11.85 2 24 2zm0 4C14.059 6 6 14.059 6 24s8.059 18 18 18 18-8.059 18-18S33.941 6 24 6zm1 26a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2a1 1 0 011-1h2zm-1.284-20c2.377 0 4.352.576 5.925 1.727C31.214 14.88 32 16.584 32 18.845c0 1.386-.342 2.553-1.026 3.502-.4.576-1.167 1.311-2.303 2.207l-1.12.88c-.61.48-1.016 1.04-1.216 1.679-.054.175-.102.499-.143.974a1 1 0 01-.996.913h-2.24a1 1 0 01-1-1l.002-.046.003-.046c.129-1.392.267-2.273.414-2.642.273-.688.978-1.48 2.114-2.375l1.152-.912c.379-.288 2.33-1.662 2.33-2.878 0-1.217-.212-1.665-.823-2.332-.61-.668-1.986-.883-3.227-.883-1.22 0-2.263.324-2.773 1.145a5.78 5.78 0 00-.569 1.2 4.18 4.18 0 00-.146.614 1 1 0 01-.985.831h-2.355a1 1 0 01-1-1l.002-.056.005-.057c.025-.223.051-.41.078-.557.39-2.172 1.377-3.768 2.962-4.79 1.241-.81 2.767-1.216 4.576-1.216z" fill="currentColor"/></svg><br><p>问答区</p>
               </div>
            </span>
         </div>
         </div>
      </div>
      <div v-if="data.news!=undefined && data.news.length!=0" style="width: 100%;border-radius: 5px;border: 1px solid rgb(230,230,230);margin-bottom: 20px;">
         <div style="width: 100%;padding: 20px 20px;border-bottom: 1px solid rgb(230,230,230);font-size: 16px;">
            高考资讯
         </div>
         <div style="padding: 20px 5px;padding-bottom: 0;">
            <div style="padding: 0px 15px;position: relative;margin-bottom: 20px;width: calc((100% - 20px) / 3);margin-right: 0px;display: inline-block;" v-bind:key="item" v-for="item in data.news" @click="openLink('https://www.sdjyxww.com/' + item.url)">
                <div style="display: inline-block;width: 30px;line-height: 100%;font-size: 16px;margin-top: 5px;">
                    {{ item.order }}
                </div>
                <div style="display: inline-block;float: right;width: calc(100% - 30px);line-height: 20px;cursor: pointer;">
                    {{ item.title }}
                </div>
            </div>
         </div>
      </div>
      <div v-if="bigdata!=undefined" style="width: 100%;border-radius: 5px;border: 1px solid rgb(230,230,230);">
         <div style="padding: 20px 20px;border-bottom: 1px solid rgb(230,230,230);font-size: 16px;">
            高考大数据
         </div>
         <div v-if="bigdata.data1.length!=0" id="chart1" style="width: 100%;height: 300px;text-align: center;"> </div>
         <div v-if="bigdata.data1.length!=0" style="text-align: center;font-size: 14px;transform: translateY(-40px);text-align: center;">
            {{ subtractYear(1) }}年一分一段表
         </div>
         <div v-if="bigdata.data2.length!=0" id="chart2" style="width: 100%;height: 300px;text-align: center;"> </div>
         <div v-if="bigdata.data2.length!=0" style="text-align: center;font-size: 14px;transform: translateY(-40px);text-align: center;">
            {{ subtractYear(2) }}年一分一段表
         </div>
         <div v-if="bigdata.data3.length!=0" id="chart3" style="width: 100%;height: 300px;text-align: center;"> </div>
         <div v-if="bigdata.data3.length!=0" style="text-align: center;font-size: 14px;transform: translateY(-40px);text-align: center;">
            {{ subtractYear(3) }}年一分一段表
         </div>
      </div>
      <div style="width: 100%;height: 100px;">

      </div>
   </div>
   <div v-if="data.isMobile==true" style="width: 100%;height: calc(100vh - 55px);position: fixed;left: 0;top: 0;overflow-y: scroll;">
      <div style="width: 100%;padding: 20px 20px;background-color: rgb(0,120,215);color: white;">
         <div style="font-size: 20px;margin-bottom: 5px;">
            欢迎来到志愿助手平台！
         </div>
         <div style="line-height: 20px;font-size: 12px;text-indent: 2em;">
            志愿助手平台旨在为考生提供全方位的辅助服务。无论您是想了解院校信息、查询专业详情，还是希望获得智能化的志愿填报建议，我们都能满足您的需求。 
         </div>
      </div>
      <div style="width: 100%;padding: 10px 10px;">
         <userInfoSectionMobile :user-info="data.loginedUserInfo" style="margin-bottom: 10px;"></userInfoSectionMobile>
         <div style="margin-right: 10px;width: calc((100% - 10px) / 2);display: inline-block;border-radius:5px;padding: 10px 10px;background-color: rgb(242,242,242);height: 45px;font-size: 15px;position: relative;margin-bottom: 10px;" @click="changePage(2)">
               <svg width="25" height="25" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.106 27.17a1 1 0 011.341-.446l2 1a1 1 0 01.553.894v6.187l11 5.923 11-5.923v-6.187a1 1 0 01.553-.894l2-1a1 1 0 011.447.894V36a2 2 0 01-1.052 1.76l-13 7a2 2 0 01-1.896 0l-13-7A2 2 0 019 36v-8.382a1 1 0 01.106-.447zM25.415 4.26l.226.093 18 8.095c1.534.69 2.324 2.113 2.358 3.554L46 16v19a1 1 0 01-1 1h-2a1 1 0 01-1-1V20.557l-16.226 8.028a4 4 0 01-3.336.098l-.212-.098-18-8.905c-2.966-1.467-2.951-5.666-.055-7.142l.188-.09 18-8.096a4 4 0 013.056-.093zM24 8L6 16.095 24 25l18-8.905L24 8z" fill="currentColor"/></svg><span style="margin-left: 10px;position: absolute;top: 10px;line-height: 25px;">院校查询</span>
         </div>
         <div style="margin-right: 0px;width: calc((100% - 10px) / 2);display: inline-block;border-radius:5px;padding: 10px 10px;background-color: rgb(242,242,242);height: 45px;font-size: 15px;position: relative;margin-bottom: 10px;" @click="changePage(3)">
            <svg width="25" height="25" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.958 3.522l19.433 10.6a1 1 0 010 1.756l-19.433 10.6a2 2 0 01-1.916 0L3.61 15.878a1 1 0 010-1.756l19.433-10.6a2 2 0 011.916 0zM5.93 22.23l-.14-.067a2 2 0 00-1.723 3.607l18.991 9.995.146.07.143.056.138.042.145.033.11.017.187.016.108.001.128-.006.172-.022.135-.028.078-.02.175-.06.103-.043c.039-.017.077-.036.115-.056l18.99-9.995a2 2 0 00-1.864-3.54L24 31.74 5.93 22.23zm0 9l-.14-.067a2 2 0 00-1.723 3.607l19 10 .142.067c.42.182.873.207 1.29.1.465.12.974.074 1.431-.167l19-10a2 2 0 00-1.862-3.54l-18.57 9.772L5.932 31.23zM10.353 15L24 7.556 37.647 15 24 22.444 10.353 15z" fill="currentColor"/></svg><span style="margin-left: 10px;position: absolute;top: 10px;line-height: 25px;">专业查询</span>
         </div>
         <div style="margin-right: 10px;width: calc((100% - 10px) / 2);display: inline-block;border-radius:5px;padding: 10px 10px;background-color: rgb(242,242,242);height: 45px;font-size: 15px;position: relative;margin-bottom: 10px;" @click="changePage(4)">
            <svg width="25" height="25" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.342 8c.647 0 1.261.312 1.676.85L21.44 12h22.464c1.157 0 2.095.895 2.095 2v28c0 1.105-.938 2-2.095 2H4.095C2.938 44 2 43.105 2 42V10.364C2 9.058 2.977 8 4.182 8h13.16zM42 16H6v24h36V16zm-17.726 5.077c.083.05.152.123.2.21l1.941 3.524a.55.55 0 00.36.274l3.792.85a.575.575 0 01.42.681.584.584 0 01-.127.265l-2.593 3.027a.593.593 0 00-.137.444l.399 4.014a.568.568 0 01-.488.63.525.525 0 01-.294-.053l-3.51-1.773a.524.524 0 00-.474 0l-3.51 1.773a.536.536 0 01-.73-.268.598.598 0 01-.052-.309l.399-4.014a.593.593 0 00-.137-.444l-2.593-3.027a.595.595 0 01.041-.811.539.539 0 01.252-.135l3.792-.85a.55.55 0 00.36-.274l1.941-3.524a.533.533 0 01.748-.21z" fill="currentColor"/></svg><span style="margin-left: 10px;position: absolute;top: 10px;line-height: 25px;">收藏夹</span>
         </div>
         <div style="margin-right: 0px;width: calc((100% - 10px) / 2);display: inline-block;border-radius:5px;padding: 10px 10px;background-color: rgb(242,242,242);height: 45px;font-size: 15px;position: relative;margin-bottom: 10px;" @click="changePage(5)">
            <svg width="25" height="25" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 4a2 2 0 012-2h25l9 9.429V44a2 2 0 01-2 2H8a2 2 0 01-2-2V4zm24 2v8.039h8V42H10V6h20zM14 28a1 1 0 011-1h10a1 1 0 011 1v2a1 1 0 01-1 1H15a1 1 0 01-1-1v-2zm1-9a1 1 0 00-1 1v2a1 1 0 001 1h18a1 1 0 001-1v-2a1 1 0 00-1-1H15z" fill="currentColor"/></svg><span style="margin-left: 10px;position: absolute;top: 10px;line-height: 25px;">志愿智能填报</span>
         </div>
         <div style="margin-right: 10px;width: calc((100% - 10px) / 2);display: inline-block;border-radius:5px;padding: 10px 10px;background-color: rgb(242,242,242);height: 45px;font-size: 15px;position: relative;margin-bottom: 10px;" @click="changePage(6)">
            <svg width="25" height="25" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M34.03 23c3.82 0 6.914 3.068 6.914 6.853a6.8 6.8 0 01-1.993 4.815C42.38 35.675 45 38.876 45 42.67v.515c0 .45-.365.815-.815.815h-1.677a.815.815 0 01-.812-.74l-.021-.196c-.42-3.111-2.79-5.495-5.374-5.495h-4.62c-2.6 0-4.97 2.416-5.364 5.558l-.015.134a.815.815 0 01-.811.739h-1.676a.815.815 0 01-.815-.815v-.515c0-3.808 2.649-7.02 6.1-8.014a6.8 6.8 0 01-1.983-4.803c0-3.785 3.096-6.853 6.914-6.853zM22 4c9.717 0 17.636 7.7 17.988 17.331a9.932 9.932 0 00-4.125-1.294C34.909 13.235 29.066 8 22 8 14.268 8 8 14.268 8 22v14h12.934l-1.377 4H6a2 2 0 01-2-2V22c0-9.941 8.059-18 18-18zm12.03 22.853a3 3 0 100 6 3 3 0 000-6zM20 25a1 1 0 011 1v2a1 1 0 01-1 1h-5a1 1 0 01-1-1v-2a1 1 0 011-1h5zm8-8a1 1 0 011 1v2a1 1 0 01-1 1H15a1 1 0 01-1-1v-2a1 1 0 011-1h13z" fill="currentColor"/></svg><span style="margin-left: 10px;position: absolute;top: 10px;line-height: 25px;">专业咨询</span>
         </div>
         <div style="margin-right: 0px;width: calc((100% - 10px) / 2);display: inline-block;border-radius:5px;padding: 10px 10px;background-color: rgb(242,242,242);height: 45px;font-size: 15px;position: relative;margin-bottom: 10px;" @click="changePage(11)">
            <svg width="25" height="25" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 2c12.15 0 22 9.85 22 22s-9.85 22-22 22S2 36.15 2 24 11.85 2 24 2zm0 4C14.059 6 6 14.059 6 24s8.059 18 18 18 18-8.059 18-18S33.941 6 24 6zm1 26a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2a1 1 0 011-1h2zm-1.284-20c2.377 0 4.352.576 5.925 1.727C31.214 14.88 32 16.584 32 18.845c0 1.386-.342 2.553-1.026 3.502-.4.576-1.167 1.311-2.303 2.207l-1.12.88c-.61.48-1.016 1.04-1.216 1.679-.054.175-.102.499-.143.974a1 1 0 01-.996.913h-2.24a1 1 0 01-1-1l.002-.046.003-.046c.129-1.392.267-2.273.414-2.642.273-.688.978-1.48 2.114-2.375l1.152-.912c.379-.288 2.33-1.662 2.33-2.878 0-1.217-.212-1.665-.823-2.332-.61-.668-1.986-.883-3.227-.883-1.22 0-2.263.324-2.773 1.145a5.78 5.78 0 00-.569 1.2 4.18 4.18 0 00-.146.614 1 1 0 01-.985.831h-2.355a1 1 0 01-1-1l.002-.056.005-.057c.025-.223.051-.41.078-.557.39-2.172 1.377-3.768 2.962-4.79 1.241-.81 2.767-1.216 4.576-1.216z" fill="currentColor"/></svg><span  style="margin-left: 10px;position: absolute;top: 10px;line-height: 25px;">问答区</span>
         </div>
         <div style="margin-top: 10px;border-radius: 5px;border: 1px solid rgb(230,230,230);margin-bottom: 20px;">
            <div style="padding: 10px 10px;border-bottom: 1px solid rgb(230,230,230);">
               高考资讯
            </div>
            <div style="padding: 10px 10px;">
               <div style="padding: 15px 0;position: relative;" v-bind:key="item" v-for="item in data.news" @click="openLink('https://www.sdjyxww.com/' + item.url)">
                <div style="display: inline-block;width: 30px;line-height: 100%;font-size: 16px;margin-top: 5px;">
                    {{ item.order }}
                </div>
                <div style="display: inline-block;float: right;width: calc(100% - 30px);line-height: 20px;cursor: pointer;">
                    {{ item.title }}
                </div>
            </div>
            </div>
         </div>
         
      <div v-if="bigdata!=undefined" style="width: 100%;border-radius: 5px;border: 1px solid rgb(230,230,230);margin-bottom: 60px;">
         <div style="padding: 10px 10px;border-bottom: 1px solid rgb(230,230,230);">
               高考大数据
            </div>
         <div v-if="bigdata.data1.length!=0" id="chart1" style="width: calc(100% + 50px);height: 300px;text-align: center;transform: translateX(0px);"> </div>
         <div v-if="bigdata.data1.length!=0" style="text-align: center;font-size: 14px;transform: translateY(-40px);text-align: center;padding:10px 10px;">
            {{ subtractYear(1) }}年一分一段表
         </div>
         <div v-if="bigdata.data2.length!=0" id="chart2" style="width: calc(100% + 50px);height: 300px;text-align: center;transform: translateX(0px);"> </div>
         <div v-if="bigdata.data2.length!=0" style="text-align: center;font-size: 14px;transform: translateY(-40px);text-align: center;padding:10px 10px;">
            {{ subtractYear(2) }}年一分一段表
         </div>
         <div v-if="bigdata.data3.length!=0" id="chart3" style="width: calc(100% + 50px);height: 300px;text-align: center;transform: translateX(0px);"> </div>
         <div v-if="bigdata.data3.length!=0" style="text-align: center;font-size: 14px;transform: translateY(-40px);text-align: center;padding:10px 10px;">
            {{ subtractYear(3) }}年一分一段表
         </div>
      </div>
      </div>
      
   </div>
 </div>
</template>

<script>
import userInfoSection from '@/components/userInfoSection.vue';
import userInfoSectionMobile from '@/components/userInfoSectionMobile.vue';
import * as echarts from 'echarts'
import axios from 'axios';


export default{
   components:{
      userInfoSection,userInfoSectionMobile
   },
   data(){
      return{
         bigdata:undefined,
         pageStyle2:true,
      }
   },
   mounted(){
      this.getBigData();
   },
   methods:{
      openLink(url){
         window.open(url)
      },
    subtractYear(num) {
  var currentYear = new Date().getFullYear();
  return currentYear - num;
    },
      getBigData(){
         // if(this.data.isMobile){
         //    return;
         // }
         var config = {
   method: 'get',
   url: '/api/v1/bigdata/scoreranking?data=' + JSON.stringify({
      ranking:this.data.loginedUserInfo==undefined?999999:this.data.loginedUserInfo.ranking
   }),
   headers: { 
      'Accept': '*/*', 
   }
};

axios(config)
.then((res) => {
   if(res.data.status==1){
      this.bigdata=res.data.results
      setTimeout(() => {
         if(res.data.results.data1.length!=0){
                let myChart = echarts.init(document.getElementById("chart1"));
      let option = {
  xAxis: {
    type: 'category',
    data: res.data.results.data1
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  series: [
    {
      data: res.data.results.data11,
      type: 'line'
    }
  ]
};
      myChart.setOption(option);
      }
      if(res.data.results.data2.length!=0){
                let myChart1 = echarts.init(document.getElementById("chart2"));
      let option1 = {
  xAxis: {
    type: 'category',
    data: res.data.results.data2
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  series: [
    {
      data: res.data.results.data21,
      type: 'line'
    }
  ]
};
      myChart1.setOption(option1);
      }
      if(res.data.results.data3.length!=0){
                let myChart2 = echarts.init(document.getElementById("chart3"));
      let option2 = {
  xAxis: {
    type: 'category',
    data: res.data.results.data3
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  series: [
    {
      data: res.data.results.data31,
      type: 'line'
    }
  ]
};
      myChart2.setOption(option2);
      }
      }, 1);
      

   }else{
      this.$message.error({
         content:res.data.content
      })
   }
})
      }
   },
   props:{
      data:{
         type:Object
      },
      changePage:undefined
   }
}
</script>

<style scoped>

.card-wrapper:active{
   box-shadow: unset !important;
}

.card-wrapper:hover{
   scale: 1.05;
   box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}


.card-wrapper{
   width: 300px;
   height: 280px;
   display: inline-block;
   position: absolute;
   border-radius: 15px;
   background-color: #f2f2f2;
   transition: scale .4s cubic-bezier(.075,.82,.165,1) 0ms,box-shadow .4s cubic-bezier(.075,.82,.165,1) 0ms,opacity .4s cubic-bezier(.075,.82,.165,1) 0ms,border-color .4s cubic-bezier(.075,.82,.165,1) 0ms;
   padding: 28px;
   cursor: pointer;
   top: 0;
   left: 50px;
}

.quick-button:active{
   scale: 0.99 !important;
}

.quick-button:hover{
   border: 1px solid rgb(0,0,0,0.4);
   /* backdrop-filter: blur(20px); */
   scale: 1.05;
}

.quick-button{
   border-radius: 5px;
   transition: all .1s;
   border: 1px solid rgb(0,0,0,0);
   display: inline-block;
   padding: 30px 0px;
   backdrop-filter: blur(10px);
   width: 140px;
   margin-left: 10px;
   margin-right: 10px;
   background-color: rgba(255,255,255,0.4);
   color: black;
}

.subpage-main{
   width: 100%;
}

.quick-button svg{
   margin-bottom: 5px;
}



</style>